<template>
	<view>
		<view class="des-banner margin-left margin-top">
			<scroll-view class="scroll-view_H flex" :scroll-x='true'>
				<view class="t-w">
					<view v-for="(item,index) in list1" :key="index" :class="`bg${item.flag}`">
						<view>
							{{item.content}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="Recommend margin-left">为你推荐</view>
		<view class="cont">
			<view
			class="list" 
			v-for="(item,index) in 2" 
			:key="index">
				<view class="intro margin-top">
					<text class="fs-36 text-cut">{{item.title}}ggg </text>
					<view class="tips fs-28 text-cut">
						{{item.intro}}ddg
					</view>
				</view>
				<image  src="../../../static/images/pic10.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="line1"></view>
		<view class="list1">
			<view class="flex">
				<view>综合排序<text class="lg cuIcon-triangledownfill"></text></view>
				<view>设计师类型<text class="lg cuIcon-triangledownfill"></text></view>
				<view>设计报价<text class="lg cuIcon-triangledownfill"></text></view>
			</view>
			<view>
				<view  v-for="(item,index) in list" @tap="handleDetail(index)" :key="index" class="margin-top">
					<view class="cu-item shadow">
						<view class="cu-list menu-avatar">
							<view class="cu-item">								
								<view class="cu-avatar lg" :style="'background:url('+item.imgurl+')'"></view>
								<view class="content flex-sub">
									<view class="fs-36">莉莉</view>
									<view>{{item.name}}</view>
									<view class="text-gray text-sm flex justify-between">
										设计报价：{{item.price}}元/m
									</view>	
									<view class="flex ys">
										<view class="radius">欧式</view>
										<view class="radius">美式</view>
									</view>	
								</view>								
							</view>
						</view>
						
					</view>
					<view class="flex margin img-b">
						<image src="../../../static/images/pic47.png" mode=""></image>
						<image src="../../../static/images/pic47.png" mode=""></image>
						<image src="../../../static/images/pic47.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {GET,loadMore} from '../../../common/http.js'
	let p = 1;
	export default{
		
		data() {
			return {
				isCard: false,
				list1:[{
					content:"一招解放封闭空间 就靠这扇[屋内窗]",
					flag:0
				},
				{
					content:"一招解放封闭空间 就靠这扇[屋内窗]",
					flag:1
				},
				{
					content:"一招解放封闭空间 就靠这扇[屋内窗]",
					flag:2
				}],
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
				
			}
		},
		async onLoad(){
				let listd = await GET('/good/list')
				console.log(listd)
				this.list = listd
			},
			async onReachBottom() { //上拉加载更多
				p = await loadMore(this,'/good/list',p,'list')
			},
			async onPullDownRefresh() {
				console.log('刷新')
				let listd = await GET('/good/list')
				this.list = listd
				p=1; //恢复页码
				uni.stopPullDownRefresh() //关闭刷新状态
			},
			methods: {
				handleDetail(idx){
					let p = 10
					uni.navigateTo({
						url:`collectDetail?idx=${idx}&page=${p}`
					})
				}
			}
		}
		
		
	
</script>

<style lang="scss">
	.des-banner{
		margin-bottom: 60upx;
		.scroll-view_H{
			height: 172upx;
			.t-w{
				width:1000upx;
				>view{
					float: left;					
					width: 300upx;
					height: 172upx;
					display: inline-block;		
					border-radius: 12upx;
					>view{
						margin:54upx 20upx;
						width:290upx;
						height:65upx;
						font-size:32upx;
						font-family:59;
						font-weight:400;
						color:rgba(255,255,255,1);
						line-height:38upx;
					}
				
				}
			}
		}
	}
	.bg0{
		background:linear-gradient(0deg,rgba(255,175,91,1),rgba(255,181,113,1));
	}
	.bg1{
		background:linear-gradient(0deg,rgba(37,157,208,1),rgba(61,163,204,1));
		margin-left:20upx;
	}
	.bg2{
		background:#FF5F55;
		margin-left:20upx;
	}
	.Recommend{
		width:160upx;
		font-size:40upx;
		font-family:59;
		font-weight:400;
		color:rgba(55,55,55,1);
		}
	page{
		background-color: #fff;
	}
	.cont{
		padding: 0 30upx;
		display: inline-block;
	
	}
	.list{
		
		display: flex;
		padding: 30upx 0;
		border-bottom: 1upx solid #f2f2f2;
		image{
			width: 230upx;
			height: 170upx;
			margin-right: 20upx;
			border-radius: 6upx;
		}
		.intro{
			width: 430upx;
			>text,view{
				display: inline-block;
				width: 430upx;
				overflow: hidden;
				
			}
			.fs-36{
				font-size: 36upx;
				color:rgba(103,103,103,1);
			}
			.fs-28{
				color:rgba(195,195,195,1);
				font-size: 32upx;
			}
			
		}
	}
	.list1{
		>.flex{
			justify-content: space-around;			
			font-size:32upx;
			font-family:59;
			font-weight:400;
			color:rgba(84,84,84,1);
			line-height:38upx;
			overflow: hidden;
			
			
		}
		.cu-avatar{
			height: 160upx;
			width: 150upx;
		}
		.flex-sub{
			margin-left: 50upx;
		}
		.ys{
			width: 150upx;
			justify-content: space-around;
			>view{
				border: 1px solid #80B5FF;
				color: #80B5FF;
				padding: 0 5upx;
			}
		}
		.img-b{
			height: 184upx;
			>image{
				height: 184upx;
			}
		}
	}
</style>
